<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>物流订单调度结果查询</title>
  <link rel="stylesheet" href="src/css/iview.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
  <style>
  [v-cloak] {
    display: none;
  }
  </style>
</head>

<body>
  <div id="app">
    <div class="vue-wrapper">
      <div class="splitWrapper" ref="splitWrapper">
        <Split v-model="splitModel">
          <div slot="left" class="leftH" ref="leftH">
            <div class="search-wrapper" ref="searchWrapper" v-show="appShow" v-cloak>
              <Row :gutter="16">
                <i-col span="10">
                  <div class="search-input common-input">
                    <span class="prepend">承运公司</span>
                    <div class="search-input-flex common-input-flex">
                      <i-input v-model="search.carrierCompany" />
                    </div>
                    <span class="append">
                      <Button type="primary" @click="carrierModal = true" class="ivu-icon ivu-icon-ios-search"></Button>
                    </span>
                  </div>
                </i-col>
                <i-col span="10">
                  <div class="search-input common-input">
                    <span class="prepend">物流单号</span>
                    <div class="search-input-flex common-input-flex">
                      <i-input v-model="search.logisticsNumber" />
                    </div>
                  </div>
                </i-col>
                <i-col span="4">
                  <div class="search-stretch" @click="toggleSearchL()">
                    <i class="ivu-icon ivu-icon-ios-arrow-up" ref="toggleiconL"></i>
                    <span ref="toggleTextL">收起查询</span>
                  </div>
                </i-col>
              </Row>
              <div class="hide-search" v-if="hideSearchL">
                <Row :gutter="16">
                  <i-col span="10">
                    <div class="search-input common-input">
                      <span class="prepend">起运地</span>
                      <div class="search-input-flex common-input-flex">
                        <i-input v-model="search.departure" />
                      </div>
                      <span class="append">
                        <a href="" class="ivu-icon ivu-icon-ios-search"></a>
                      </span>
                    </div>
                  </i-col>
                  <i-col span="10">
                    <div class="search-input common-input">
                      <span class="prepend">目的地</span>
                      <div class="search-input-flex common-input-flex">
                        <i-input v-model="search.destination" />
                      </div>
                      <span class="append">
                        <a href="" class="ivu-icon ivu-icon-ios-search"></a>
                      </span>
                    </div>
                  </i-col>
                </Row>
                <Row :gutter="16">
                  <i-col span="10">
                    <div class="search-select common-input">
                      <span class="prepend">调度状态</span>
                      <div class="common-input-flex">
                        <i-select v-model="search.selectSchedulingStatus">
                          <i-option v-for="item in search.schedulingStatus" :value="item.value" :key="item.value">{{
                            item.label }}</i-option>
                        </i-select>
                      </div>
                    </div>
                  </i-col>
                  <i-col span="4" class="fr tar">
                    <a href="" class="ivu-icon ivu-icon-ios-search search-btn2">查询</a>
                  </i-col>
                </Row>
              </div>
            </div>
            <div class="page-content">
              <!-- <h2 class="table-total">您当前共有<span>{{tableDataRecords}}</span>项订单信息</h2> -->
              <i-table :columns="tableColumn" :data="tableData" ref="selectionL" highlight-row stripe :height = "tableH"></i-table>
              <div style="margin: 10px;overflow: hidden">
                <div class="tac">
                  <Page :total="tableDataRecords" :current="1" @on-change="changePage"></Page>
                </div>
              </div>
            </div>
          </div>
          <div slot="right" class="split-pane-right">
            <div class="search-wrapper" v-show="appShow" v-cloak>
              <Row :gutter="16">
                <i-col span="10">
                  <div class="search-input common-input">
                    <span class="prepend">货主</span>
                    <div class="search-input-flex common-input-flex">
                      <i-input v-model="searchr.owner" />
                    </div>
                    <span class="append">
                      <Button type="primary" @click="ownerModal = true" class="ivu-icon ivu-icon-ios-search"></Button>
                    </span>
                  </div>
                </i-col>
                <i-col span="10">
                  <div class="search-input common-input">
                    <span class="prepend">业务单号</span>
                    <div class="search-input-flex common-input-flex">
                      <i-input v-model="searchr.businessNumber" />
                    </div>
                  </div>
                </i-col>
                <i-col span="4">
                  <div class="search-stretch" @click="toggleSearchR()">
                    <i class="ivu-icon ivu-icon-ios-arrow-up" ref="toggleiconR"></i>
                    <span ref="toggleTextR">收起查询</span>
                  </div>
                </i-col>
              </Row>
              <div class="hide-search" v-if="hideSearchR">
                <Row :gutter="16">
                  <i-col span="10">
                    <div class="search-input common-input">
                      <span class="prepend">集货区</span>
                      <div class="search-input-flex common-input-flex">
                        <i-input v-model="searchr.gatheringArea" />
                      </div>
                    </div>
                  </i-col>
                  <i-col span="10">
                    <div class="search-input common-input">
                      <span class="prepend">交接状态</span>
                      <div class="search-input-flex common-input-flex">
                        <i-select v-model="searchr.selectHandoverStatus">
                          <i-option v-for="item in searchr.handoverStatus" :value="item.value" :key="item.value">{{
                            item.label }}</i-option>
                        </i-select>
                      </div>
                    </div>
                  </i-col>
                  <i-col span="4" class="tar">
                    <a href="" class="ivu-icon ivu-icon-ios-search search-btn2">查询</a>
                  </i-col>
                </Row>
              </div>
            </div>
            <div class="page-content" if="showShipmentNumber">
              <Row class="mb-10 ml-10">
                <i-col span="12" class="empty-btn">
                  <button @click="handoverModala()">交接确认</button>
                  <button @click="returnModala()">退回</button>
                </i-col>
              </Row>
              <!-- <h2 class="table-total">您当前共有<span>{{tableDataRecordsr}}</span>项订单信息</h2> -->
              <i-table :columns="tableColumnr" :data="tableDataR" ref="selectionR" stripe :height = "tableH"></i-table>
              <div style="margin: 10px;overflow: hidden">
                <div class="tac">
                  <Page :total="tableDataRecordsr" :current="1" @on-change="changePageR"></Page>
                </div>
              </div>
            </div>
          </div>
        </Split>
      </div>
      <!-- 选择承运商 -->
      <Modal v-model="carrierModal" title="选择承运公司" @on-ok="carrierOk" @on-cancel="carrierCancel" width="675">
        <i-table :columns="carrierTableColumn" :data="carrierTableData" ref="selectionCarrier" stripe></i-table>
      </Modal>
      <!-- 选择货主 -->
      <Modal v-model="ownerModal" title="选择货主" @on-ok="ownerOk" @on-cancel="ownerCancel" width="715">
        <i-table :columns="ownerTableColumn" :data="ownerTableData" ref="selectionOwner" stripe></i-table>
      </Modal>
      <!-- 交接确认 -->
      <Modal v-model="handoverModal" title="信息" @on-ok="handoverOk" @on-cancel="handoverCancel" class="handover-modal"
        width="300">
        <p class="ivu-icon ivu-icon-ios-alert-outline">共选择{{handoverNumber}}笔订单，确认交接并打印吗？</p>
      </Modal>
      <!-- 返回 -->
      <Modal v-model="returnModal" title="信息" @on-ok="returnOk" @on-cancel="returnCancel" class="handover-modal" width="300">
        <p class="ivu-icon ivu-icon-ios-alert-outline">共选择{{handoverNumber}}笔订单，确认将订单退回重新集单吗？</p>
      </Modal>
    </div>
    <div style="height: 90px; background: #ccc;"></div>
  </div>
  <script src="src/js/vue.js"></script>
  <script src="src/js/axios.min.js"></script>
  <script src="src/js/iview.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        appShow: false,
        splitModel: 0.5,
        hideSearchL: true,
        hideSearchR: true,
        search: {
          carrierCompany: '',
          logisticsNumber: '',
          departure: '',
          destination: '',
          selectSchedulingStatus: '',
          schedulingStatus: [
            {
              value: '全部',
              label: '全部'
            }, {
              value: '未确认',
              label: '未确认'
            }, {
              value: '已下发',
              label: '已下发'
            }, {
              value: '已接单',
              label: '已接单'
            }, {
              value: '承运商拒单',
              label: '承运商拒单'
            }
          ]
        },
        tableColumn: [
          {
            type: 'index',
            title: '序号',
            width: 40,
            align: 'center',
            fixed: 'left'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 185,
            fixed: 'left',
            render: (h, params) => {
              return h('div', [
                h('a', {
                  class: 'table-btn',
                  on: {
                    click: () => {
                      appLayout.printOrder(params.index)
                    }
                  }
                }, '打印装车任务单'),
                h('a', {
                  class: 'table-btn',
                  attrs: {
                    href: 'schedulingResult2.html'
                  },
                }, '交接记录')
              ]);
            }
          },
          {
            title: '物流单号',
            key: 'shipmentNumber',
            width: 170,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('strong', params.row.shipmentNumber, {
                  on: {
                    click: () => {
                      appLayout.showLeftTable(params.index)
                    }
                  }
                })
              ]);
            }
          },
          {
            title: '承运公司',
            key: 'carrierCompany',
            width: 170,
            align: 'center'
          },
          {
            title: '总件数',
            width: 60,
            key: 'totalNumber',
            align: 'right'
          },
          {
            title: '已交接件数',
            key: 'deliveredNumber',
            width: 90,
            align: 'right'
          },
          {
            title: '订单数',
            key: 'orderNumber',
            width: 90,
            align: 'center'
          },
          {
            title: '已交接订单数',
            key: 'deliveredOrders',
            width: 90,
            align: 'right'
          },
          {
            title: '起运地',
            key: 'departure',
            width: 150,
            align: 'center'
          },
          {
            title: '目的地',
            key: 'destination',
            width: 150,
            align: 'center'
          },
          {
            title: '要求到达时间',
            key: 'arrivalTime',
            width: 90,
            align: 'center'
          },
          {
            title: '温度要求',
            key: 'temperatureRequirement',
            width: 70,
            align: 'center'
          },
          {
            title: '车型',
            key: 'carModel',
            width: 110,
            align: 'center'
          },
          {
            title: '承运价格(元)',
            key: 'carrierPrice',
            width: 110,
            align: 'right'
          },
          {
            title: '调度状态',
            key: 'schedulingStatus',
            width: 110,
            align: 'center'
          }
        ],
        tableDataRecords: 0,
        tableData: [],
        searchr: {
          owner: '',
          businessNumber: '',
          gatheringArea: '',
          selectHandoverStatus: '',
          handoverStatus: [
            {
              value: '全部',
              label: '全部'
            }, {
              value: '待交接',
              label: '待交接'
            }, {
              value: '已交接',
              label: '已交接'
            }
          ]
        },
        tableColumnr: [
          {
            type: 'selection',
            width: 40,
            align: 'right'
          }, {
            title: '交接状态',
            key: 'handoverStatus',
            width: 100,
            align: 'center',
            render: (h, params) => {
              // let style = '';

              // if (params.row.handoverStatus == '待交接') {
              //   style = 'font-red';
              // } else if (params.row.handoverStatus == '已交接') {
              //   style = 'font-gray';
              // }
              return h('div', [
                // h('span', {
                //   class: style
                // }, params.row.handoverStatus)
                h('span', {
                    class: params.row.handoverStatus == "待交接" ? "font-red" : "font-gray"
                  },
                  params.row.handoverStatus
                )
              ]);
            }
          }, {
            title: '业务单号',
            key: 'businessNumber',
            width: 150,
            align: 'center'
          }, {
            title: '货主',
            key: 'owner',
            width: 170,
            align: 'center'
          }, {
            title: '件数',
            key: 'pieces',
            width: 50,
            align: 'right'
          }, {
            title: '集货区',
            key: 'gatheringArea',
            width: 80,
            align: 'center'
          }, {
            title: '订单日期',
            key: 'orderDate',
            width: 100,
            align: 'center'
          }, {
            title: '收货单位',
            key: 'receivingUnit',
            width: 220,
            align: 'center'
          }, {
            title: '收货人',
            key: 'receiver',
            width: 70,
            align: 'center'
          }, {
            title: '联系电话',
            key: 'tel',
            width: 90,
            align: 'center'
          }, {
            title: '地址',
            key: 'address',
            width: 250,
            align: 'center'
          }, {
            title: '备注',
            key: 'remarks',
            width: 150,
            align: 'center'
          }
        ],
        tableDataR: [],
        tableDataRecordsr: 0,
        showShipmentNumber: false,
        carrierModal: false,
        carrierTableColumn: [
          {
            title: '选择',
            with: 40,
            align: 'center',
            render: (h, params) => {
              let name = params.row.carrierName;
              let self = this;
              return h('span', [
                h('input', {
                  attrs: {
                    type: 'radio',
                    name: "tableRadio"
                  },
                  on: {
                    input: function() {
                      self.carrierName = name
                      console.log(self.carrierName)
                    }
                  }
                })
              ])
            }
          }, {
            type: 'index',
            title: '序号',
            width: 40,
            align: 'center'
          }, {
            title: '名称',
            key: 'carrierName',
            width: 200,
            align: 'center'
          }, {
            title: '所在城市',
            key: 'carrierCity',
            width: 200,
            align: 'center'
          }, {
            title: '承运范围',
            key: 'carrierRange',
            width: 80,
            align: 'center'
          }, {
            title: '车辆数',
            key: 'carrierCar',
            width: 80,
            align: 'center'
          }
        ],
        carrierTableData: [],
        ownerModal: false,
        ownerTableColumn: [
          {
            title: '选择',
            with: 40,
            align: 'center',
            render: (h, params) => {
              let name = params.row.ownerName;
              let self = this;
              return h('span', [
                h('input', {
                  attrs: {
                    type: 'radio',
                    name: "tableRadio2"
                  },
                  on: {
                    input: function() {
                      self.ownerName = name
                      console.log(self.ownerName)
                    }
                  }
                })
              ])
            }
          }, {
            type: 'index',
            title: '序号',
            width: 40,
            align: 'center'
          }, {
            title: '名称',
            key: 'ownerName',
            width: 200,
            align: 'center'
          }, {
            title: '单位名称',
            key: 'ownerName2',
            width: 200,
            align: 'center'
          }, {
            title: '地址',
            key: 'ownerAddress',
            width: 200,
            align: 'center'
          }
        ],
        ownerTableData: [],
        handoverModal: false,
        returnModal: false,
        handoverNumber: 0,
        tableH: ''
      },
      mounted() {
        this.getCarrierTableData()
        this.getOwnerTableData()

        var splitH = this.$refs.splitWrapper.clientHeight;
        var searchH = this.$refs.searchWrapper.clientHeight;

        console.log(splitH,1)
        console.log(searchH,2)
        this.tableH = splitH - searchH - 15 - 52 - 150

        this.$nextTick(function () {
          this.getTableData()
          this.getTableDataR()
          this.appShow = true
        })
      },
      methods: {
        // 头部查询框伸缩
        toggleSearchL() {
          this.$refs.toggleTextL.innerText = !this.hideSearchL ? '收起查询' : '展开查询'
          this.$refs.toggleiconL.style.transform = !this.hideSearchL ? 'rotate(0)' : 'rotate(180deg)'
          this.hideSearchL = !this.hideSearchL
        },
        toggleSearchR() {
          this.$refs.toggleTextR.innerText = !this.hideSearchR ? '收起查询' : '展开查询'
          this.$refs.toggleiconR.style.transform = !this.hideSearchR ? 'rotate(0)' : 'rotate(180deg)'
          this.hideSearchR = !this.hideSearchR
        },
        // 获取表格数据
        getTableData() {
          axios.get('static/schedulingResult.json').then((res) => {
            this.tableData = res.data.Datas;
            this.tableDataRecords = res.data.TotalRecords;
            
            (this.tableData[0] || [])._highlight = true
          })
        },
        changePage() {
          this.tableData = this.getTableData();
        },
        getTableDataR() {
          axios.get('static/schedulingResult2.json').then(response => {
            this.tableDataR = response.data.Datas;

            if (this.tableDataR) {
              this.tableDataR.forEach(function (item) {
                item._checked = false;
                item._disabled = item.handoverStatus == '已交接';
              });
            };

            this.tableDataRecordsr = response.data.TotalRecords;
          
          })
        },
        changePageR() {
          this.tableData = this.getTableDataR();
        },
        // 选择承运商
        getCarrierTableData() {
          axios.get('static/selectCarrier.json').then(response => {
            this.carrierTableData = response.data.Datas;
          })
        },
        carrierOk() {
          this.search.carrierCompany = self.carrierName
          debugger
          this.carrierModal = true
        },
        carrierCancel() {
          this.search.carrierCompany = ''
        },
        // 选择货主
        getOwnerTableData() {
          axios.get('static/selectOwner.json').then(response => {
            this.ownerTableData = response.data.Datas;
          })
        },
        ownerOk() {
          this.searchr.owner = self.ownerName
        },
        ownerCancel() {
          this.searchr.owner = ''
        },
        // 交接确认
        handoverModala() {
          this.handoverModal = true;
          if (this.tableDataR) {
            this.handoverNumber = (this.$refs.selectionR.getSelection() || []).length;
          }
        },
        handoverOk() {},
        handoverCancel() {},
        // 返回
        returnModala() {
          this.returnModal = true;
          if (this.tableDataR) {
            this.handoverNumber = (this.$refs.selectionR.getSelection() || []).length;
          }
        },
        returnOk() {},
        returnCancel() {},
        // 打印装车任务单
        printOrder(index) {
          this.$Modal.info({
            title: 'User Info',
            // content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
          })
        },
        // 点击物流单号显示业务单号表格
        showLeftTable() {

        },

        
      }
    })
  </script>
</body>

</html>